import Intro from "@/components/Intro";
import { Button, Card, Modal, Space, Tabs, message } from "antd";
import { min_app_shell } from '@linksaas-minapp/api';
import { useState } from "react";
import { defaultConfig } from "@/components/config";
import useForceUpdate from 'use-force-update';
import RulePanel from "@/components/RulePanel";
import { RuleConfigCondition, RuleConfigSeverity, UserConfig } from "@commitlint/types";
import PromptPanel from "@/components/PromptPanel";
import { writeText } from '@tauri-apps/api/clipboard';


export default function Home() {
  const forceUpdate = useForceUpdate();

  const [lintCfg, setLintCfg] = useState(JSON.parse(JSON.stringify(defaultConfig)) as UserConfig);
  const [showCfgModal, setShowCfgModal] = useState(false);

  return (
    <Card title="commitlint配置助手" extra={
      <Space>
        <Button type="link" onClick={e => {
          e.stopPropagation();
          e.preventDefault();
          min_app_shell.openBrowser("https://commitlint.js.org/");
        }}>官方文档</Button>
        <Button onClick={e => {
          e.stopPropagation();
          e.preventDefault();
          setLintCfg(JSON.parse(JSON.stringify(defaultConfig)) as UserConfig);
          forceUpdate();
        }}>重置配置</Button>
        <Button onClick={e => {
          e.stopPropagation();
          e.preventDefault();
          setShowCfgModal(true);
        }}>查看配置</Button>
      </Space>
    }>
      <Intro />

      <Tabs defaultActiveKey="rule">
        <Tabs.TabPane key="rule" tab="规则配置">
          <RulePanel rules={lintCfg.rules ?? {}} onChange={rules => {
            setLintCfg({ ...lintCfg, rules });
            forceUpdate();
          }} />
        </Tabs.TabPane>
        <Tabs.TabPane key="prompt" tab="提示配置">
          <PromptPanel prompt={lintCfg.prompt ?? {}} onChange={prompt => {
            let rules = lintCfg.rules ?? {}
            if (prompt.questions !== undefined && prompt.questions.type !== undefined && prompt.questions.type.enum !== undefined) {
              if (rules["type-enum"] == undefined) {
                rules["type-enum"] = [1, "always", []];
              }
              (rules["type-enum"] as [RuleConfigSeverity, RuleConfigCondition, unknown])[2] = Object.keys(prompt.questions.type.enum);
            }
            setLintCfg({ ...lintCfg, rules, prompt });
            forceUpdate();
          }} />
        </Tabs.TabPane>
      </Tabs>

      {showCfgModal == true && (
        <Modal title="配置内容" open bodyStyle={{ maxHeight: "calc(100vh - 300px)", overflowY: "scroll" }}
          okText="复制" onCancel={e => {
            e.stopPropagation();
            e.preventDefault();
            setShowCfgModal(false);
          }}
          onOk={e => {
            e.stopPropagation();
            e.preventDefault();
            setShowCfgModal(false);
            writeText(JSON.stringify(lintCfg, null, 2)).then(() => {
              message.info("复制成功");
            });
          }}>
          <pre style={{ whiteSpace: "break-spaces" }}>
            {JSON.stringify(lintCfg, null, 2)}
          </pre>
        </Modal>
      )}
    </Card>
  )
}
